<template>
    <div class="gray-bg ChannelList">
	    <div class="row wrapper border-bottom white-bg page-heading">
	        <div class="col-lg-10 col-lg-offset-1">
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <router-link to="../../login"> <i class="fa fa-sign-out"></i> Log out </router-link>
                    </li>
                </ul>
                <h2>广告数据</h2>
                <ol class="breadcrumb">
                    <li>
                        <a> 广告数据 </a>
                    </li>
                </ol>
            </div>
	    </div>
        <div class="wrapper wrapper-content animated fadeInRight min-height-800px">

            <div class="row">
                <div class=" loading" v-bind:class="{ 'display-block' : loadingFlag,  'display-none' : !loadingFlag}"><img src="../../../../static/img/loading.png"></div>
                <div class="col-lg-10 col-lg-offset-1">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>广告数据</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-8 m-b-xs">
	                                <div class="form-group">
	                                    <div class="input-daterange input-group" id="datepicker">
                                            <span> FROM </span>
                                            <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
                                            <span> TO </span>
                                            <date-picker :date="endTime" :option="option" :limit="limit"></date-picker>
	                                    </div>
                                    </div>
                                    <div class="form-group">
                                        <label> country </label>
                                        <select data-placeholder="Choose a Country..." class="chosen-select" id='country' style="width:350px;">
                                            <option value=""></option>
                                            <option v-for="item in config.ADdateCountryList" v-bind:value='item.key'>{{ item.value }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label> placement </label>
                                        <select data-placeholder="Choose a placement..." class="chosen-select" id='placement' multiple style="width:350px;">
                                            <option value=""></option>
                                            <option v-for="item in ADdataPlacementList" v-bind:value='item.value'>{{ item.value }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group">

                                        <div class="col-sm-4 padding-left-0px">
                                            <label>source</label>
                                            <select class="form-control m-b" v-model='source'>
                                                <option value="">SELECT</option>
                                                <option v-for="item in ADSourceList" v-bind:value='item.key'>{{ item.value }}</option>
                                            </select>
                                        </div>

                                        <div class="col-sm-4 padding-left-0px">
                                            <label>type</label>
                                            <select class="form-control m-b" v-model='type'>
                                                <option value="">SELECT</option>
                                                <option v-for="item in ADTypeList" v-bind:value='item.key'>{{ item.value }}</option>
                                            </select>
                                        </div>

                                        <div class="col-sm-4 padding-left-0px">
                                            <label>APP</label>
                                            <select class="form-control m-b" v-model='APP'>
                                                <option value="">SELECT</option>
                                                <option v-for="item in ADDataAPPList" v-bind:value='item.key'>{{ item.value }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="float-right">
		                            <button class="btn btn-w-m btn-primary" v-on:click="refresh" >
		                                <i class="fa fa-refresh"></i>
                                        刷新
		                            </button>
                                    <button class="btn btn-w-m btn-primary" v-on:click="exportCsv">
                                        <i class="fa fa-external-link"></i>
                                        导出
                                    </button>
                                </div>
                            </div>

                            <div class="panel blank-panel">

                                <div class="panel-heading">
                                    <div class="panel-options">

                                        <ul class="nav nav-tabs">
                                            <li class="active" v-on:click="changeTab('bdDate')"><a data-toggle="tab" href="#tab-1"> Date </a></li>
                                            <li class="" v-on:click="changeTab('bdSource')"><a data-toggle="tab" href="#tab-2"> source </a></li>
                                            <li class="" v-on:click="changeTab('bdCountry')"><a data-toggle="tab" href="#tab-3"> Country </a></li>
                                            <li class="" v-on:click="changeTab('bdApp')"><a data-toggle="tab" href="#tab-4"> APP </a></li>
                                            <li class="" v-on:click="changeTab('bdPlacement')"><a data-toggle="tab" href="#tab-5"> placement </a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="panel-body">

                                    <div class="tab-content">
                                        <div id="tab-1" class="tab-pane active">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th v-bind:class="{ esc : (sort.date%2 == 1) && (sort.date != 0),  desc : (sort.date%2 == 0) && (sort.date != 0)}"
                                                            v-on:click="sortData('date')"> 
                                                            Date
                                                        </th>

                                                        <th v-bind:class="{ esc : (sort.type%2 == 1) && (sort.type != 0),  desc : (sort.type%2 == 0) && (sort.type != 0)}" 
                                                            v-on:click="sortData('type')"> type </th>

                                                        <th v-bind:class="{ esc : (sort.request%2 == 1) && (sort.request != 0),  desc : (sort.request%2 == 0) && (sort.request != 0)}" 
                                                            v-on:click="sortData('request')"> request </th>

                                                        <th v-bind:class="{ esc : (sort.filled%2 == 1) && (sort.filled != 0),  desc : (sort.filled%2 == 0) && (sort.filled != 0)}" 
                                                            v-on:click="sortData('filled')"> filled </th>

                                                        <th v-bind:class="{ esc : (sort.fillrate%2 == 1) && (sort.fillrate != 0),  desc : (sort.fillrate%2 == 0) && (sort.fillrate != 0)}" 
                                                            v-on:click="sortData('fillrate')"> fillrate </th>

                                                        <th v-bind:class="{ esc : (sort.impressionp%2 == 1) && (sort.impressionp != 0),  desc : (sort.impressionp%2 == 0) && (sort.impressionp != 0)}" 
                                                            v-on:click="sortData('impressionp')"> impressionp </th>

                                                        <th v-bind:class="{ esc : (sort.impression%2 == 1) && (sort.impression != 0),  desc : (sort.impression%2 == 0) && (sort.impression != 0)}" 
                                                            v-on:click="sortData('impression')"> impression </th>

                                                        <th v-bind:class="{ esc : (sort.clicksp%2 == 1) && (sort.clicksp != 0),  desc : (sort.clicksp%2 == 0) && (sort.clicksp != 0)}" 
                                                            v-on:click="sortData('clicksp')"> Clicksp </th>

                                                        <th v-bind:class="{ esc : (sort.clicks%2 == 1) && (sort.clicks != 0),  desc : (sort.clicks%2 == 0) && (sort.clicks != 0)}" 
                                                            v-on:click="sortData('clicks')"> Clicks </th>
                                                        <th v-bind:class="{ esc : (sort.ctrp%2 == 1) && (sort.ctrp != 0),  desc : (sort.ctrp%2 == 0) && (sort.ctrp != 0)}" 
                                                            v-on:click="sortData('ctrp')"> CTRp </th>
                                                        <th v-bind:class="{ esc : (sort.ctr%2 == 1) && (sort.ctr != 0),  desc : (sort.ctr%2 == 0) && (sort.ctr != 0)}" 
                                                            v-on:click="sortData('ctr')"> CTR </th>
                                                        <th v-bind:class="{ esc : (sort.eCPM%2 == 1) && (sort.eCPM != 0),  desc : (sort.eCPM%2 == 0) && (sort.eCPM != 0)}" 
                                                            v-on:click="sortData('eCPM')"> eCPm </th>
                                                        <th v-bind:class="{ esc : (sort.earning%2 == 1) && (sort.earning != 0),  desc : (sort.earning%2 == 0) && (sort.earning != 0)}" 
                                                            v-on:click="sortData('earning')"> Earning </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td> ALL </td>
                                                        <td> ALL </td>
                                                        <td>{{ numFormat.format(requestTotal + '') }}</td>
                                                        <td>{{ numFormat.format(filledTotal + '') }}</td>
                                                        <td> {{ fillrateTotal + '%' }} </td>
                                                        <td> {{ numFormat.format(impressionpTotal + '') }} </td>
                                                        <td> {{ numFormat.format(impressionTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClickspTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClicksTotal + '') }} </td>
                                                        <td> {{ CTRpTotal  + '%' }} </td>
                                                        <td> {{ CTRTotal + '%' }} </td>
                                                        <td> {{ '$' + numFormat.format(eCPmTotal + '') }} </td>
                                                        <td> {{ '$' + numFormat.format(EarningTotal + '') }} </td>
                                                    </tr>
                                                    <tr v-for="item in tableDataDate">
                                                        <td>{{ item.date }}</td>
                                                        <td>{{ item.type }}</td>
                                                        <td>{{ numFormat.format(item.request ? item.request : '') }}</td>
                                                        <td>{{ numFormat.format(item.filled ? item.filled : '') }}</td>
                                                        <td>{{ item.fillrate }}</td>
                                                        <td>{{ numFormat.format(item.impressionp ? item.impressionp : '') }}</td>
                                                        <td>{{ numFormat.format(item.impression ? item.impression : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicksp ? item.clicksp : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicks ? item.clicks : '') }}</td>
                                                        <td>{{ item.ctrp }}</td>
                                                        <td>{{ item.ctr }}</td>
                                                        <td>{{ item.eCPM }}</td>
                                                        <td>{{ item.earning }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                        <div id="tab-2" class="tab-pane">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th v-bind:class="{ esc : (sort.source%2 == 1) && (sort.source != 0),  desc : (sort.source%2 == 0) && (sort.source != 0)}" 
                                                            v-on:click="sortData('source')"> Source </th>

                                                        <th v-bind:class="{ esc : (sort.type%2 == 1) && (sort.type != 0),  desc : (sort.type%2 == 0) && (sort.type != 0)}" 
                                                            v-on:click="sortData('type')"> type </th>

                                                        <th v-bind:class="{ esc : (sort.request%2 == 1) && (sort.request != 0),  desc : (sort.request%2 == 0) && (sort.request != 0)}" 
                                                            v-on:click="sortData('request')"> request </th>

                                                        <th v-bind:class="{ esc : (sort.filled%2 == 1) && (sort.filled != 0),  desc : (sort.filled%2 == 0) && (sort.filled != 0)}" 
                                                            v-on:click="sortData('filled')"> filled </th>

                                                        <th v-bind:class="{ esc : (sort.fillrate%2 == 1) && (sort.fillrate != 0),  desc : (sort.fillrate%2 == 0) && (sort.fillrate != 0)}" 
                                                            v-on:click="sortData('fillrate')"> fillrate </th>

                                                        <th v-bind:class="{ esc : (sort.impressionp%2 == 1) && (sort.impressionp != 0),  desc : (sort.impressionp%2 == 0) && (sort.impressionp != 0)}" 
                                                            v-on:click="sortData('impressionp')"> impressionp </th>

                                                        <th v-bind:class="{ esc : (sort.impression%2 == 1) && (sort.impression != 0),  desc : (sort.impression%2 == 0) && (sort.impression != 0)}" 
                                                            v-on:click="sortData('impression')"> impression </th>

                                                        <th v-bind:class="{ esc : (sort.clicksp%2 == 1) && (sort.clicksp != 0),  desc : (sort.clicksp%2 == 0) && (sort.clicksp != 0)}" 
                                                            v-on:click="sortData('clicksp')"> Clicksp </th>

                                                        <th v-bind:class="{ esc : (sort.clicks%2 == 1) && (sort.clicks != 0),  desc : (sort.clicks%2 == 0) && (sort.clicks != 0)}" 
                                                            v-on:click="sortData('clicks')"> Clicks </th>

                                                        <th v-bind:class="{ esc : (sort.ctrp%2 == 1) && (sort.ctrp != 0),  desc : (sort.ctrp%2 == 0) && (sort.ctrp != 0)}" 
                                                            v-on:click="sortData('ctrp')"> CTRp </th>

                                                        <th v-bind:class="{ esc : (sort.ctr%2 == 1) && (sort.ctr != 0),  desc : (sort.ctr%2 == 0) && (sort.ctr != 0)}" 
                                                            v-on:click="sortData('ctr')"> CTR </th>

                                                        <th v-bind:class="{ esc : (sort.eCPM%2 == 1) && (sort.eCPM != 0),  desc : (sort.eCPM%2 == 0) && (sort.eCPM != 0)}" 
                                                            v-on:click="sortData('eCPM')"> eCPm </th>

                                                        <th v-bind:class="{ esc : (sort.earning%2 == 1) && (sort.earning != 0),  desc : (sort.earning%2 == 0) && (sort.earning != 0)}" 
                                                            v-on:click="sortData('earning')"> Earning </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td> ALL </td>
                                                        <td> ALL </td>
                                                        <td>{{ numFormat.format(requestTotal + '') }}</td>
                                                        <td>{{ numFormat.format(filledTotal + '') }}</td>
                                                        <td> {{ fillrateTotal + '%' }} </td>
                                                        <td> {{ numFormat.format(impressionpTotal + '') }} </td>
                                                        <td> {{ numFormat.format(impressionTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClickspTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClicksTotal + '') }} </td>
                                                        <td> {{ CTRpTotal  + '%' }} </td>
                                                        <td> {{ CTRTotal + '%' }} </td>
                                                        <td> {{ '$' + numFormat.format(eCPmTotal + '') }} </td>
                                                        <td> {{ '$' + numFormat.format(EarningTotal + '') }} </td>
                                                    </tr>
                                                    <tr v-for="item in tableDataSource">
                                                        <td>{{ item.source }}</td>
                                                        <td>{{ item.type }}</td>
                                                        <td>{{ numFormat.format(item.request ? item.request : '') }}</td>
                                                        <td>{{ numFormat.format(item.filled ? item.filled : '') }}</td>
                                                        <td>{{ item.fillrate }}</td>
                                                        <td>{{ numFormat.format(item.impressionp ? item.impressionp : '') }}</td>
                                                        <td>{{ numFormat.format(item.impression ? item.impression : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicksp ? item.clicksp : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicks ? item.clicks : '') }}</td>
                                                        <td>{{ item.ctrp }}</td>
                                                        <td>{{ item.ctr }}</td>
                                                        <td>{{ item.eCPM }}</td>
                                                        <td>{{ item.earning }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id="tab-3" class="tab-pane">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th v-bind:class="{ esc : (sort.country%2 == 1) && (sort.country != 0),  desc : (sort.country%2 == 0) && (sort.country != 0)}" 
                                                            v-on:click="sortData('country')"> Country </th>
                                                        <th v-bind:class="{ esc : (sort.type%2 == 1) && (sort.type != 0),  desc : (sort.type%2 == 0) && (sort.type != 0)}" 
                                                            v-on:click="sortData('type')"> type </th>

                                                        <th v-bind:class="{ esc : (sort.request%2 == 1) && (sort.request != 0),  desc : (sort.request%2 == 0) && (sort.request != 0)}" 
                                                            v-on:click="sortData('request')"> request </th>

                                                        <th v-bind:class="{ esc : (sort.filled%2 == 1) && (sort.filled != 0),  desc : (sort.filled%2 == 0) && (sort.filled != 0)}" 
                                                            v-on:click="sortData('filled')"> filled </th>

                                                        <th v-bind:class="{ esc : (sort.fillrate%2 == 1) && (sort.fillrate != 0),  desc : (sort.fillrate%2 == 0) && (sort.fillrate != 0)}" 
                                                            v-on:click="sortData('fillrate')"> fillrate </th>

                                                        <th v-bind:class="{ esc : (sort.impressionp%2 == 1) && (sort.impressionp != 0),  desc : (sort.impressionp%2 == 0) && (sort.impressionp != 0)}" 
                                                            v-on:click="sortData('impressionp')"> impressionp </th>

                                                        <th v-bind:class="{ esc : (sort.impression%2 == 1) && (sort.impression != 0),  desc : (sort.impression%2 == 0) && (sort.impression != 0)}" 
                                                            v-on:click="sortData('impression')"> impression </th>

                                                        <th v-bind:class="{ esc : (sort.clicksp%2 == 1) && (sort.clicksp != 0),  desc : (sort.clicksp%2 == 0) && (sort.clicksp != 0)}" 
                                                            v-on:click="sortData('clicksp')"> Clicksp </th>

                                                        <th v-bind:class="{ esc : (sort.clicks%2 == 1) && (sort.clicks != 0),  desc : (sort.clicks%2 == 0) && (sort.clicks != 0)}" 
                                                            v-on:click="sortData('clicks')"> Clicks </th>

                                                        <th v-bind:class="{ esc : (sort.ctrp%2 == 1) && (sort.ctrp != 0),  desc : (sort.ctrp%2 == 0) && (sort.ctrp != 0)}" 
                                                            v-on:click="sortData('ctrp')"> CTRp </th>

                                                        <th v-bind:class="{ esc : (sort.ctr%2 == 1) && (sort.ctr != 0),  desc : (sort.ctr%2 == 0) && (sort.ctr != 0)}" 
                                                            v-on:click="sortData('ctr')"> CTR </th>

                                                        <th v-bind:class="{ esc : (sort.eCPM%2 == 1) && (sort.eCPM != 0),  desc : (sort.eCPM%2 == 0) && (sort.eCPM != 0)}" 
                                                            v-on:click="sortData('eCPM')"> eCPm </th>

                                                        <th v-bind:class="{ esc : (sort.earning%2 == 1) && (sort.earning != 0),  desc : (sort.earning%2 == 0) && (sort.earning != 0)}" 
                                                            v-on:click="sortData('earning')"> Earning </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td> ALL </td>
                                                        <td> ALL </td>
                                                        <td>{{ numFormat.format(requestTotal + '') }}</td>
                                                        <td>{{ numFormat.format(filledTotal + '') }}</td>
                                                        <td> {{ fillrateTotal + '%' }} </td>
                                                        <td> {{ numFormat.format(impressionpTotal + '') }} </td>
                                                        <td> {{ numFormat.format(impressionTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClickspTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClicksTotal + '') }} </td>
                                                        <td> {{ CTRpTotal  + '%' }} </td>
                                                        <td> {{ CTRTotal + '%' }} </td>
                                                        <td> {{ '$' + numFormat.format(eCPmTotal + '') }} </td>
                                                        <td> {{ '$' + numFormat.format(EarningTotal + '') }} </td>
                                                    </tr>
                                                    <tr v-for="item in tableDataCountry">

                                                        <td>{{ item.country }}</td>
                                                        <!-- <td>{{ config.ADdateCountryList_1[item.country] }}</td> -->
                                                        <td>{{ item.type }}</td>
                                                        <td>{{ numFormat.format(item.request ? item.request : '') }}</td>
                                                        <td>{{ numFormat.format(item.filled ? item.filled : '') }}</td>
                                                        <td>{{ item.fillrate }}</td>
                                                        <td>{{ numFormat.format(item.impressionp ? item.impressionp : '') }}</td>
                                                        <td>{{ numFormat.format(item.impression ? item.impression : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicksp ? item.clicksp : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicks ? item.clicks : '') }}</td>
                                                        <td>{{ item.ctrp }}</td>
                                                        <td>{{ item.ctr }}</td>
                                                        <td>{{ item.eCPM }}</td>
                                                        <td>{{ item.earning }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id="tab-4" class="tab-pane">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th v-bind:class="{ esc : (sort.app%2 == 1) && (sort.app != 0),  desc : (sort.app%2 == 0) && (sort.app != 0)}" 
                                                            v-on:click="sortData('app')"> APP </th>
                                                        <!-- <th> source </th> -->
                                                        <!-- <th> type </th> -->
                                                        <th v-bind:class="{ esc : (sort.type%2 == 1) && (sort.type != 0),  desc : (sort.type%2 == 0) && (sort.type != 0)}" 
                                                            v-on:click="sortData('type')"> type </th>

                                                        <th v-bind:class="{ esc : (sort.request%2 == 1) && (sort.request != 0),  desc : (sort.request%2 == 0) && (sort.request != 0)}" 
                                                            v-on:click="sortData('request')"> request </th>

                                                        <th v-bind:class="{ esc : (sort.filled%2 == 1) && (sort.filled != 0),  desc : (sort.filled%2 == 0) && (sort.filled != 0)}" 
                                                            v-on:click="sortData('filled')"> filled </th>

                                                        <th v-bind:class="{ esc : (sort.fillrate%2 == 1) && (sort.fillrate != 0),  desc : (sort.fillrate%2 == 0) && (sort.fillrate != 0)}" 
                                                            v-on:click="sortData('fillrate')"> fillrate </th>

                                                        <th v-bind:class="{ esc : (sort.impressionp%2 == 1) && (sort.impressionp != 0),  desc : (sort.impressionp%2 == 0) && (sort.impressionp != 0)}" 
                                                            v-on:click="sortData('impressionp')"> impressionp </th>

                                                        <th v-bind:class="{ esc : (sort.impression%2 == 1) && (sort.impression != 0),  desc : (sort.impression%2 == 0) && (sort.impression != 0)}" 
                                                            v-on:click="sortData('impression')"> impression </th>

                                                        <th v-bind:class="{ esc : (sort.clicksp%2 == 1) && (sort.clicksp != 0),  desc : (sort.clicksp%2 == 0) && (sort.clicksp != 0)}" 
                                                            v-on:click="sortData('clicksp')"> Clicksp </th>

                                                        <th v-bind:class="{ esc : (sort.clicks%2 == 1) && (sort.clicks != 0),  desc : (sort.clicks%2 == 0) && (sort.clicks != 0)}" 
                                                            v-on:click="sortData('clicks')"> Clicks </th>

                                                        <th v-bind:class="{ esc : (sort.ctrp%2 == 1) && (sort.ctrp != 0),  desc : (sort.ctrp%2 == 0) && (sort.ctrp != 0)}" 
                                                            v-on:click="sortData('ctrp')"> CTRp </th>

                                                        <th v-bind:class="{ esc : (sort.ctr%2 == 1) && (sort.ctr != 0),  desc : (sort.ctr%2 == 0) && (sort.ctr != 0)}" 
                                                            v-on:click="sortData('ctr')"> CTR </th>

                                                        <th v-bind:class="{ esc : (sort.eCPM%2 == 1) && (sort.eCPM != 0),  desc : (sort.eCPM%2 == 0) && (sort.eCPM != 0)}" 
                                                            v-on:click="sortData('eCPM')"> eCPm </th>

                                                        <th v-bind:class="{ esc : (sort.earning%2 == 1) && (sort.earning != 0),  desc : (sort.earning%2 == 0) && (sort.earning != 0)}" 
                                                            v-on:click="sortData('earning')"> Earning </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td> ALL </td>
                                                        <td> ALL </td>
                                                        <td>{{ numFormat.format(requestTotal + '') }}</td>
                                                        <td>{{ numFormat.format(filledTotal + '') }}</td>
                                                        <td> {{ fillrateTotal + '%' }} </td>
                                                        <td> {{ numFormat.format(impressionpTotal + '') }} </td>
                                                        <td> {{ numFormat.format(impressionTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClickspTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClicksTotal + '') }} </td>
                                                        <td> {{ CTRpTotal  + '%' }} </td>
                                                        <td> {{ CTRTotal + '%' }} </td>
                                                        <td> {{ '$' + numFormat.format(eCPmTotal + '') }} </td>
                                                        <td> {{ '$' + numFormat.format(EarningTotal + '') }} </td>
                                                    </tr>
                                                    <tr v-for="item in tableDataAPP">
                                                        <td>{{ item.app }}</td>
                                                        <!-- <td>{{ item.source }}</td> -->
                                                        <td>{{ item.type }}</td>
                                                        <td>{{ numFormat.format(item.request ? item.request : '') }}</td>
                                                        <td>{{ numFormat.format(item.filled ? item.filled : '') }}</td>
                                                        <td>{{ item.fillrate }}</td>
                                                        <td>{{ numFormat.format(item.impressionp ? item.impressionp : '') }}</td>
                                                        <td>{{ numFormat.format(item.impression ? item.impression : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicksp ? item.clicksp : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicks ? item.clicks : '') }}</td>
                                                        <td>{{ item.ctrp }}</td>
                                                        <td>{{ item.ctr }}</td>
                                                        <td>{{ item.eCPM }}</td>
                                                        <td>{{ item.earning }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id="tab-5" class="tab-pane">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th v-bind:class="{ esc : (sort.placement%2 == 1) && (sort.placement != 0),  desc : (sort.placement%2 == 0) && (sort.placement != 0)}" 
                                                            v-on:click="sortData('placement')"> Placement </th>
                                                        <!-- <th> source </th> -->
                                                        <!-- <th> app </th> -->
                                                        <th v-bind:class="{ esc : (sort.type%2 == 1) && (sort.type != 0),  desc : (sort.type%2 == 0) && (sort.type != 0)}" 
                                                            v-on:click="sortData('type')"> type </th>

                                                        <th v-bind:class="{ esc : (sort.request%2 == 1) && (sort.request != 0),  desc : (sort.request%2 == 0) && (sort.request != 0)}" 
                                                            v-on:click="sortData('request')"> request </th>

                                                        <th v-bind:class="{ esc : (sort.filled%2 == 1) && (sort.filled != 0),  desc : (sort.filled%2 == 0) && (sort.filled != 0)}" 
                                                            v-on:click="sortData('filled')"> filled </th>

                                                        <th v-bind:class="{ esc : (sort.fillrate%2 == 1) && (sort.fillrate != 0),  desc : (sort.fillrate%2 == 0) && (sort.fillrate != 0)}" 
                                                            v-on:click="sortData('fillrate')"> fillrate </th>

                                                        <th v-bind:class="{ esc : (sort.impressionp%2 == 1) && (sort.impressionp != 0),  desc : (sort.impressionp%2 == 0) && (sort.impressionp != 0)}" 
                                                            v-on:click="sortData('impressionp')"> impressionp </th>

                                                        <th v-bind:class="{ esc : (sort.impression%2 == 1) && (sort.impression != 0),  desc : (sort.impression%2 == 0) && (sort.impression != 0)}" 
                                                            v-on:click="sortData('impression')"> impression </th>

                                                        <th v-bind:class="{ esc : (sort.clicksp%2 == 1) && (sort.clicksp != 0),  desc : (sort.clicksp%2 == 0) && (sort.clicksp != 0)}" 
                                                            v-on:click="sortData('clicksp')"> Clicksp </th>

                                                        <th v-bind:class="{ esc : (sort.clicks%2 == 1) && (sort.clicks != 0),  desc : (sort.clicks%2 == 0) && (sort.clicks != 0)}" 
                                                            v-on:click="sortData('clicks')"> Clicks </th>

                                                        <th v-bind:class="{ esc : (sort.ctrp%2 == 1) && (sort.ctrp != 0),  desc : (sort.ctrp%2 == 0) && (sort.ctrp != 0)}" 
                                                            v-on:click="sortData('ctrp')"> CTRp </th>

                                                        <th v-bind:class="{ esc : (sort.ctr%2 == 1) && (sort.ctr != 0),  desc : (sort.ctr%2 == 0) && (sort.ctr != 0)}" 
                                                            v-on:click="sortData('ctr')"> CTR </th>

                                                        <th v-bind:class="{ esc : (sort.eCPM%2 == 1) && (sort.eCPM != 0),  desc : (sort.eCPM%2 == 0) && (sort.eCPM != 0)}" 
                                                            v-on:click="sortData('eCPM')"> eCPm </th>

                                                        <th v-bind:class="{ esc : (sort.earning%2 == 1) && (sort.earning != 0),  desc : (sort.earning%2 == 0) && (sort.earning != 0)}" 
                                                            v-on:click="sortData('earning')"> Earning </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td> ALL </td>
                                                        <td> ALL </td>
                                                        <td>{{ numFormat.format(requestTotal + '') }}</td>
                                                        <td>{{ numFormat.format(filledTotal + '') }}</td>
                                                        <td> {{ fillrateTotal + '%' }} </td>
                                                        <td> {{ numFormat.format(impressionpTotal + '') }} </td>
                                                        <td> {{ numFormat.format(impressionTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClickspTotal + '') }} </td>
                                                        <td> {{ numFormat.format(ClicksTotal + '') }} </td>
                                                        <td> {{ CTRpTotal  + '%' }} </td>
                                                        <td> {{ CTRTotal + '%' }} </td>
                                                        <td> {{ '$' + numFormat.format(eCPmTotal + '') }} </td>
                                                        <td> {{ '$' + numFormat.format(EarningTotal + '') }} </td>
                                                    </tr>
                                                    <tr v-for="item in tableDataPlacement">
                                                        <td>{{ item.placement }}</td>
                                                        <!-- <td>{{ item.source }}</td> -->
                                                        <!-- <td>{{ item.app }}</td> -->
                                                        <td>{{ item.type }}</td>
                                                        <td>{{ numFormat.format(item.request ? item.request : '') }}</td>
                                                        <td>{{ numFormat.format(item.filled ? item.filled : '') }}</td>
                                                        <td>{{ item.fillrate }}</td>
                                                        <td>{{ numFormat.format(item.impressionp ? item.impressionp : '') }}</td>
                                                        <td>{{ numFormat.format(item.impression ? item.impression : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicksp ? item.clicksp : '') }}</td>
                                                        <td>{{ numFormat.format(item.clicks ? item.clicks : '') }}</td>
                                                        <td>{{ item.ctrp }}</td>
                                                        <td>{{ item.ctr }}</td>
                                                        <td>{{ item.eCPM }}</td>
                                                        <td>{{ item.earning }}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

// 配置参数
import config from '../../../../config/config.js'
import dateFormat from '../../server/dateFormat.js'
import numFormat from '../../server/formatNum.js'
import myDatepicker from '../../../../static/js/plugins/vue-datepicker/vue-datepicker-es6.vue'
import toastr from '../../../../static/js/toastr.min'

import '../../../../static/js/inspinia.js'    
import '../../../../static/js/plugins/pace/pace.min.js'
import '../../../../static/js/plugins/metisMenu/jquery.metisMenu.js'    
import '../../../../static/js/plugins/chosen/chosen.jquery.js'
import '../../../../static/js/plugins/metisMenu/jquery.metisMenu.js'    



export default {
  data () {
    return {
        numFormat: numFormat,
        config: config,
        startTime: {
          time: ''
        },
        endTime: {
          time: ''
        },
        // 多选框中Placement 列表
        ADdataPlacementList: [
            { key: 'banner_bottom', value: 'banner_bottom' },
            { key: 'banner_middle', value: 'banner_middle' },
            { key: 'banner_top', value: 'banner_top' },
            { key: 'basketball', value: 'basketball' },
            { key: 'black', value: 'black' },
            { key: 'charging', value: 'charging' },
            { key: 'connect_success', value: 'connect_success' },
            { key: 'giftbox', value: 'giftbox' },
            { key: 'open_wlan', value: 'open_wlan' },
            { key: 'test_finish', value: 'test_finish' },
            { key: 'test_rope', value: 'test_rope' },
            { key: 'uninstall', value: 'uninstall' },
            { key: 'unplug_headset', value: 'unplug_headset' }
        ],
        // 下拉框中app类型
        ADDataAPPList: [
        ],
        // 下拉框中source类型
        ADSourceList: [
        ],
        // 下拉框中type类型
        ADTypeList: [
        ],
        // jquery 形式获取
        // country: '',
        // jquery 形式获取
        // placement: '',
        source: '',
        type: '',
        APP: '',
        // 选项卡类型
        tabType: 'bdDate',
        // 表格数据（data）
        tableDataDate: [
        ],
        // 表格数据（source）
        tableDataSource: [
        ],
        // 表格数据（data）
        tableDataCountry: [
        ],
        // 表格数据（data）
        tableDataAPP: [
        ],
        // 表格数据（data）
        tableDataPlacement: [
        ],
        // 表格数据汇总
        requestTotal: 0,
        filledTotal: 0,
        fillrateTotal: 0,
        impressionpTotal: 0,
        impressionTotal: 0,
        ClickspTotal: 0,
        ClicksTotal: 0,
        CTRpTotal: 0,
        CTRTotal: 0,
        eCPmTotal: 0,
        EarningTotal: 0,
        // 配置日期选择框
        option: config.datePicker.option,
        timeoption: config.datePicker.timeoption,
        multiOption: config.datePicker.multiOption,
        limit: config.datePicker.limit,
        sort: {
            type: 0,
            source: 0,
            request: 0,
            placement: 0,
            impressionp: 0,
            impression: 0,
            fillrate: 0,
            filled: 0,
            earning: 0,
            eCPM: 0,
            date: 0,
            ctrp: 0,
            ctr: 0,
            country: 0,
            clicksp: 0,
            clicks: 0,
            app: 0
        },
        loadingFlag: true,
    }
  },
  components: {
    "date-picker": myDatepicker
  },
  // 组建创建完成之后执行
  created () {

    // console.log(numFormat.format('12312312'));
    // console.log(3%2)

    //日期选择框时间初始化
    let yesterday = new Date();
    yesterday.setDate(yesterday.getDate() - 30);
    this.endTime.time = dateFormat.format(new Date(), "yyyy-MM-dd");
    this.startTime.time = dateFormat.format(yesterday, "yyyy-MM-dd");

    // 初始化国家选择框
    setTimeout(function() {
        var config = {
            '.chosen-select'           : {},
            '.chosen-select-deselect'  : {allow_single_deselect:true},
            '.chosen-select-no-single' : {disable_search_threshold:10},
            '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
            '.chosen-select-width'     : {width:"95%"}
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
    }, 0);

    // 获取placementList数据
    this.getPlacementListData()

    // 获取APPlist数据
    this.getADDListData()
    // 获取sourcelist数据
    this.getSourceListData()
    // 获取Typelist数据
    this.getTypeListData()
    // 获取表格数据
    this.GetTableData()

  },
  methods: {
    sortData (title) { 
            let tittleNum = this.sort[title];

            this.sort.type = 0;
            this.sort.source = 0;
            this.sort.request = 0;
            this.sort.placement = 0;
            this.sort.impressionp = 0;
            this.sort.impression = 0;
            this.sort.fillrate = 0;
            this.sort.filled = 0;
            this.sort.earning = 0;
            this.sort.eCPM = 0;
            this.sort.date = 0;
            this.sort.ctrp = 0;
            this.sort.ctr = 0;
            this.sort.country = 0;
            this.sort.clicksp = 0;
            this.sort.clicks = 0;
            this.sort.app = 0;

        this.sort[title] = tittleNum + 1;

        switch(this.tabType) {
            case 'bdDate':

                if (title == 'date' || title == 'source' || title == 'country' || title == 'app' || title == 'placement' || title == 'type') {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataDate = this.tableDataDate.sort(this.sortBy(title, true));
                    } else {
                        this.tableDataDate = this.tableDataDate.sort(this.sortBy(title, false));
                    }

                } else {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataDate = this.tableDataDate.sort(this.compare(title));
                    } else {
                        this.tableDataDate = this.tableDataDate.sort(this.compareDesc(title));
                    }

                }
              break;
            case 'bdSource':
                // vue.tableDataSource = data.data ? data.data.result : [];

                if (title == 'date' || title == 'source' || title == 'country' || title == 'app' || title == 'placement' || title == 'type') {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataSource = this.tableDataSource.sort(this.sortBy(title, false));
                    } else {
                        this.tableDataSource = this.tableDataSource.sort(this.sortBy(title, true));
                    }

                } else {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataSource = this.tableDataSource.sort(this.compareDesc(title));
                    } else {
                        this.tableDataSource = this.tableDataSource.sort(this.compare(title));
                    }

                }
              break;
            case 'bdCountry':
                // vue.tableDataCountry = data.data ? data.data.result : [];

                if (title == 'date' || title == 'source' || title == 'country' || title == 'app' || title == 'placement' || title == 'type') {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataCountry = this.tableDataCountry.sort(this.sortBy(title, false));
                    } else {
                        this.tableDataCountry = this.tableDataCountry.sort(this.sortBy(title, true));
                    }

                } else {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataCountry = this.tableDataCountry.sort(this.compareDesc(title));
                    } else {
                        this.tableDataCountry = this.tableDataCountry.sort(this.compare(title));
                    }

                }
              break;
            case 'bdApp':
                // vue.tableDataAPP = data.data ? data.data.result : [];

                if (title == 'date' || title == 'source' || title == 'country' || title == 'app' || title == 'placement' || title == 'type') {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataAPP = this.tableDataAPP.sort(this.sortBy(title, false));
                    } else {
                        this.tableDataAPP = this.tableDataAPP.sort(this.sortBy(title, true));
                    }

                } else {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataAPP = this.tableDataAPP.sort(this.compareDesc(title));
                    } else {
                        this.tableDataAPP = this.tableDataAPP.sort(this.compare(title));
                    }

                }
              break;
            case 'bdPlacement':
                // vue.tableDataPlacement = data.data ? data.data.result : [];

                if (title == 'date' || title == 'source' || title == 'country' || title == 'app' || title == 'placement' || title == 'type') {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataPlacement = this.tableDataPlacement.sort(this.sortBy(title, false));
                    } else {
                        this.tableDataPlacement = this.tableDataPlacement.sort(this.sortBy(title, true));
                    }

                } else {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataPlacement = this.tableDataPlacement.sort(this.compareDesc(title));
                    } else {
                        this.tableDataPlacement = this.tableDataPlacement.sort(this.compare(title));
                    }

                }
              break;
            default:
                // vue.tableDataDate = data.data ? data.data.result : [];

                if (title == 'date' || title == 'source' || title == 'country' || title == 'app' || title == 'placement' || title == 'type') {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataDate = this.tableDataDate.sort(this.sortBy(title, false));
                    } else {
                        this.tableDataDate = this.tableDataDate.sort(this.sortBy(title, true));
                    }

                } else {

                    if (this.sort[title]%2 == 1) {
                        this.tableDataDate = this.tableDataDate.sort(this.compareDesc(title));
                    } else {
                        this.tableDataDate = this.tableDataDate.sort(this.compare(title));
                    }

                }
        }

    },
    exportCsv () {
        const vue = this;

        let url = "http://" + config.URL + '/effect/exportCSV?';
        // 开始时间
        url += ('begain=' + vue.startTime.time)
        // 结束时间
        url += ('&end=' + vue.endTime.time)
        // 国家
        if ($('#country').val()) {
            url += ('&country=' + $('#country').val())
        }
        // 位置
        if ($('#placement').val()) {
            $('#placement').val().forEach(function(element, index) {
                if (index == 0) {
                    url += ('&placement="' + element + '"');
                } else {
                    url += (',"' + element + '"');
                }
            })
            // url += ('&placement=' + ($('#placement').val()).join(","))
        }
        // source
        if (vue.source) {
            url += ('&source=' + vue.source)
        }
        // type
        if (vue.type) {
            url += ('&type=' + vue.type)
        }
        // APP
        if (vue.APP) {
            url += ('&app=' + vue.APP)
        }
        // tabType
        url += ('&' + vue.tabType + '=' + 1)
        // 页码和页号
        url += '&pageNum=1&pageSize=10000';
        $.ajax({
                url: url,
                dataType: "jsonp",
                async: false, 
                processData:true,
                type:'get',
                jsonp:"callback",
                timeout: 5000,
                success:function(data, status){
                    if (data.code == 1) {
                        toastr.success("请求成功");
                        console.log(data.data);
                        window.location.href = data.data;
                    } else {
                        toastr.erro("请求失败");
                    }
                },
                error:function(XHR, textStatus, errorThrown){
                }
        });
    },
    // 设置选项卡类型
    changeTab (tabType) {
        this.tabType = tabType;
        this.GetTableData(true);
    },
    getPlacementListData () {
        const vm = this;
        $.ajax({
                url:"http://" + config.URL + '/effect/showAdPlacement',
                dataType:"jsonp",
                async: false, 
                processData:true,
                type:'get',
                jsonp:"callback",
                timeout: 5000,
                success:function(data, status){
                    data.data.forEach(function(element, index) {
                        vm.ADdataPlacementList.push({
                            key: element,
                            value: element
                        })
                    })
                },
                error:function(XHR, textStatus, errorThrown){
                }
        });
    },
    getADDListData () {
        const vm = this;
        $.ajax({
                url:"http://" + config.URL + '/effect/showAdApp',
                dataType:"jsonp",
                async: false, 
                processData:true,
                type:'get',
                jsonp:"callback",
                timeout: 5000,
                success:function(data, status){
                    data.data.forEach(function(element, index) {
                        vm.ADDataAPPList.push({
                            key: element,
                            value: element
                        })
                    })
                },
                error:function(XHR, textStatus, errorThrown){
                }
        });
    },
    getSourceListData () {
        const vm = this;
        $.ajax({
                url:"http://" + config.URL + '/effect/showAdSource',
                dataType:"jsonp",
                async: false, 
                processData:true,
                type:'get',
                jsonp:"callback",
                timeout: 5000,
                success:function(data, status){
                    data.data.forEach(function(element, index) {
                        vm.ADSourceList.push({
                            key: element,
                            value: element
                        })
                    })
                },
                error:function(XHR, textStatus, errorThrown){
                }
        });
    },
    getTypeListData () {
        const vm = this;
        $.ajax({
                url:"http://" + config.URL + '/effect/showAdType',
                dataType:"jsonp",
                async: false, 
                processData:true,
                type:'get',
                jsonp:"callback",
                timeout: 5000,
                success:function(data, status){
                    data.data.forEach(function(element, index) {
                        vm.ADTypeList.push({
                            key: element,
                            value: element
                        })
                    })
                },
                error:function(XHR, textStatus, errorThrown){
                }
        });
    },
    refresh () {
        if (this.endTime.time < this.startTime.time) {
            // 刷新时候日期的判断
            toastr.info("截至日期不能小于开始日期");
            return false;
        } else if (dateFormat.format(new Date(), "yyyy-MM-dd") < this.endTime.time) {
            // 当前日期不能小于截止日期check 
            toastr.info("截至日期不能大于当前日期");
            return false;
        }
        this.GetTableData(true);
    },
    compareDesc (property) {
        return function(a,b){



            var value1;
            var value2;
            switch(property) {
                case 'fillrate':
                    value1 = a[property] ? a[property].substring(0, a[property].length - 1) : -1;
                    value2 = b[property] ? b[property].substring(0, b[property].length - 1) : -1;
                break;
                case 'ctrp':
                    value1 = a[property] ? a[property].substring(0, a[property].length - 1) : -1;
                    value2 = b[property] ? b[property].substring(0, b[property].length - 1) : -1;
                break;
                case 'ctr':
                    value1 = a[property] ? a[property].substring(0, a[property].length - 1) : -1;
                    value2 = b[property] ? b[property].substring(0, b[property].length - 1) : -1;
                break;
                case 'eCPM':
                    value1 = a[property] ? a[property].substring(1) : -1;
                    value2 = b[property] ? b[property].substring(1) : -1;
                break;
                case 'earning':
                    value1 = a[property] ? a[property].substring(1) : -1;
                    value2 = b[property] ? b[property].substring(1) : -1;
                break;                

                default:
                    value1 = a[property] ? a[property] : -1;
                    value2 = b[property] ? b[property] : -1;
            }

            // console.log(property);
            // console.log(a[property]);
            return value2 - value1;
        }
    },
    compare (property) {
        return function(a,b){

            var value1;
            var value2;
            switch(property) {
                case 'fillrate':
                    value1 = a[property] ? a[property].substring(0, a[property].length - 1) : -1;
                    value2 = b[property] ? b[property].substring(0, b[property].length - 1) : -1;
                break;
                case 'ctrp':
                    value1 = a[property] ? a[property].substring(0, a[property].length - 1) : -1;
                    value2 = b[property] ? b[property].substring(0, b[property].length - 1) : -1;
                break;
                case 'ctr':
                    value1 = a[property] ? a[property].substring(0, a[property].length - 1) : -1;
                    value2 = b[property] ? b[property].substring(0, b[property].length - 1) : -1;
                break;
                case 'eCPM':
                    value1 = a[property] ? a[property].substring(1) : -1;
                    value2 = b[property] ? b[property].substring(1) : -1;
                break;                
                case 'earning':
                    value1 = a[property] ? a[property].substring(1) : -1;
                    value2 = b[property] ? b[property].substring(1) : -1;
                break;                
                default:
                    value1 = a[property] ? a[property] : -1;
                    value2 = b[property] ? b[property] : -1;
            }

            return value1 - value2;
        }

    },

    sortBy (attr,rev) {
        //第二个参数没有传递 默认升序排列
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }
        return function(a,b){
            a = a[attr] ? a[attr] : 0;
            b = b[attr] ? b[attr] : 0;
            // console.log(a);

            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    },

    // 获取表格数据，点击刷新按钮的场合 ‘refresh’ 为真
    GetTableData (refresh) {

        // loadding动画显示
        this.loadingFlag = true;

        // 清除排序
        this.sort.type = 0;
        this.sort.source = 0;
        this.sort.request = 0;
        this.sort.placement = 0;
        this.sort.impressionp = 0;
        this.sort.impression = 0;
        this.sort.fillrate = 0;
        this.sort.filled = 0;
        this.sort.earning = 0;
        this.sort.eCPM = 0;
        this.sort.date = 0;
        this.sort.ctrp = 0;
        this.sort.ctr = 0;
        this.sort.country = 0;
        this.sort.clicksp = 0;
        this.sort.clicks = 0;
        this.sort.app = 0;

        const vue = this;

        // totle行置0
        vue.requestTotal = 0;
        vue.filledTotal = 0;
        vue.fillrateTotal = 0;
        vue.impressionpTotal = 0;
        vue.impressionTotal = 0;
        vue.ClickspTotal = 0;
        vue.ClicksTotal = 0;
        vue.CTRpTotal = 0;
        vue.CTRTotal = 0;
        vue.eCPmTotal = 0;
        vue.EarningTotal = 0;


        let url = "http://" + config.URL + '/effect/showAdEffect?';
        // let url = 'http://192.168.1.53:8888/yibaad/effect/showAdEffect?'
        // 开始时间
        url += ('begain=' + vue.startTime.time)
        // 结束时间
        url += ('&end=' + vue.endTime.time)
        // 国家
        if ($('#country').val()) {
            url += ('&country=' + $('#country').val())
        }
        // 位置
        if ($('#placement').val()) {
            $('#placement').val().forEach(function(element, index) {
                if (index == 0) {
                    url += ('&placement="' + element + '"');
                } else {
                    url += (',"' + element + '"');
                }
            })
            // url += ('&placement=' + ($('#placement').val()).join(","))
        }
        // source
        if (vue.source) {
            url += ('&source=' + vue.source)
        }
        // type
        if (vue.type) {
            url += ('&type=' + vue.type)
        }
        // APP
        if (vue.APP) {
            url += ('&app=' + vue.APP)
        }
        // tabType
        url += ('&' + vue.tabType + '=' + 1)
        // 页码和页号
        url += '&pageNum=1&pageSize=10000'

        $.ajax({
            url: url,
            dataType:"jsonp",
            async: false, 
            processData:true,
            type:'get', 
            jsonp:"callback",
            timeout: 5000,
            success:function(data, status){
                // console.log(vue.tabType);
                // console.log(data.data.result);
                switch(vue.tabType) {
                    case 'bdDate':
                        vue.tableDataDate = data.data ? data.data.result : [];
                      break;
                    case 'bdSource':
                        vue.tableDataSource = data.data ? data.data.result : [];
                      break;
                    case 'bdCountry':
                        vue.tableDataCountry = data.data ? data.data.result : [];
                      break;
                    case 'bdApp':
                        vue.tableDataAPP = data.data ? data.data.result : [];
                      break;
                    case 'bdPlacement':
                        vue.tableDataPlacement = data.data ? data.data.result : [];
                      break;
                    default:
                        vue.tableDataDate = data.data ? data.data.result : [];
                }
                if (refresh) {
                    toastr.success("刷新成功");
                }



                // requestTotal: 0,
                // filledTotal: 0,
                // fillrateTotal: 0,
                // impressionpTotal: 0,
                // impressionTotal: 0,
                // ClickspTotal: 0,
                // ClicksTotal: 0,
                // CTRpTotal: 0,
                // CTRTotal: 0,
                // eCPmTotal: 0,
                // EarningTotal: 0,
                $(data.data.result).each(function(index, element) {
                    vue.requestTotal += (parseInt(element.request) ? parseInt(element.request) : 0);
                    vue.filledTotal += (parseInt(element.filled) ? parseInt(element.filled) : 0);
                    vue.impressionpTotal += (parseInt(element.impressionp) ? parseInt(element.impressionp) : 0);
                    vue.impressionTotal += (parseInt(element.impression) ? parseInt(element.impression) : 0);
                    vue.ClickspTotal += (parseInt(element.clicksp) ? parseInt(element.clicksp) : 0);
                    vue.ClicksTotal += (parseInt(element.clicks) ? parseInt(element.clicks) : 0);
                    vue.EarningTotal += (parseFloat(element.earning ? element.earning.substring(1) : element.earning) ? parseFloat(element.earning ? element.earning.substring(1) : element.earning) : 0);
                    // ecpm=Earning/impression*1000
                    vue.eCPmTotal = vue.EarningTotal / vue.impressionTotal * 1000;
                }) 
                // fillrate=fill/request
                vue.fillrateTotal = ((vue.filledTotal / vue.requestTotal) * 100).toFixed(2)
                // ctrp=clickp/imressionp
                vue.CTRpTotal = ((vue.ClickspTotal / vue.impressionpTotal) * 100).toFixed(2)
                // ctr=click/imression
                vue.CTRTotal = ((vue.ClicksTotal / vue.impressionTotal) * 100).toFixed(2)


                // loadding动画显示
                vue.loadingFlag = false;
            },
            error:function(XHR, textStatus, errorThrown){
                toastr.error("请求出错，请稍后再试");
                // loadding动画显示
                vue.loadingFlag = false;
            }
        });
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table thead tr th:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50, 50, 50, 0.5);
}

table thead tr th.esc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
    color: rgba(50, 50, 50, 0.5);
}
table thead tr th.desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
    color: rgba(50, 50, 50, 0.5);
}


table thead tr th {

-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Chrome/Safari/Opera */

-khtml-user-select: none; /* Konqueror */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; /* Non-prefixed version, currently

not supported by any browser */

}

.loading {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #666666;
    opacity: .4;
}

.loading img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    opacity: 1;
    margin-top: 300px;
    animation:circle 1s infinite linear;/*匀速 循环*/
    transform-origin: 25px 24px;
}

.display-none {
    display: none;
}

.display-block {
    display: block;
}

@-webkit-keyframes circle{

0%{ transform:rotate(0deg); }

100%{ transform:rotate(360deg); }

}



</style>
